<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>卡片布局案例1</title>
		<style>
			/* css样式思路: 
			  1.通配选择器: 微软雅黑、#f5f5f5  浅灰； 外边距至0
			  2.#product_card:边框、 内边距、 外边距、 阴影【透明度 .1】、 文字居中
			  3.img 边框倒角  内外边距？【微调】
			  4. h3 颜色  内外边距? 【微调】
			  5. p:字体大小、颜色
			  6. p+span: span是否需要内外边距?  【微调】  颜色
			  */
			 *{
				 font-family:Microsoft Accor black,sans-serif;
				 background-color: #f5f5f5;
			 }
			 div#product_card{
				 width: 300px;
				 height: 640px;
				 background: white;
				 border-radius: 10px;
				 margin: 50px;
				 padding: 50px 50px 50px 50px;
				 box-shadow: 5px 5px 10px 1px rgba(227, 227, 227, 0.8) inset;
				 text-align: center;
			 }
			 img{
				 border-radius: 10px;
				 margin: 0 auto;
			 }
			 h3{
				 background-color: white;
				 margin: 30px;
			 }
			 #product_card #price{
				 font-size: 18px;
				 background-color: white;
				 color: red;
				 margin: 18px;
			 }
			#product_card #pinjia{
				background-color: white;
				color: #adadad;
				margin-left: 8px;
			}
			#pinjia span{
				background-color: white;
				color: #ffaa00;
			}
		</style>
	</head>
	<body>
		<!-- 网页: 1. html 结构【原生图分析】 -->
		<div id="product_card">
			<img src="img/su7.jpg" width="300px" height="500px" alt="汽车">
			<h3>小米SU7</h3>
			<p id="price">￥279999.00</p>
			<p id="pinjia" class="p-with-spaces">已有&nbsp;<span>10万+&nbsp;</span>人评价</p>
		</div>
	</body>
</html>